<template>
	<view class="page_content">
		<view class="header">
			<view class="flex">
				<image class="img" :src="merImg"></image>
				<view class="name">{{merInfo.name}}</view>
				<view class="mark" @click="goToApply">入驻信息</view>
				<view class="iconfont icon-xiangyou " @click="goToApply"></view>
			</view>
			<view class="count">
				<view class="item">
					<view class="amount">{{amountAll}}</view>
					<view class="title">总收益</view>
				</view>
				<view class="item">
					<view class="amount">{{amountMonth}}</view>
					<view class="title">本月收益</view>
				</view>
			</view>
		</view>
		<view class="mode">
			<view v-for="(item, index) in useList" :key="index" @click="goUse(index)" class="use">
				<image class="useImg" :src="urlDomain + item.url"></image>
				<view class="text">{{item.text}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Cache from '@/utils/cache';
	import {
		getUserMerInfoApi, getUserMerAmountApi
	} from '@/api/merchant.js';
	
	export default {
		data() {
			return {
				urlDomain: this.$Cache.get("imgHost"),
				merImg: '',
				merInfo: {},
				amountAll: 0,
				amountMonth: 0,
				useList: [
					{url: 'crmebimage/presets/dianpuxx.png', text: '店铺信息'},
					{url: 'crmebimage/presets/shoukm.png', text: '我的收款码'},
					{url: 'crmebimage/presets/shouzmx.png', text: '收益明细'},
				]
			}
		},
		onShow() {
			this.init();
		},
		methods: {
			init: function(){
				this.merImg = this.urlDomain+'crmebimage/presets/morenT.png';
				
				this.getUserMerInfo();
				this.getAmountInfo();
			},
			getUserMerInfo: function() {
				let that = this;
				
				getUserMerInfoApi().then(res =>{
					let data = res.data;
					that.merInfo = data;
					//缓存
					Cache.set("shopInfo", res.data);
					if(data.avatar!=null&&data.avatar!=''){
						that.merImg = data.avatar;
					}
				});
			},
			getAmountInfo: function() {
				getUserMerAmountApi().then(res =>{
					let data = res.data;
					this.amountAll = data.total;
					this.amountMonth = data.mouth;
				});
			},
			goToApply() {
				uni.navigateTo({
					url: '/pages/users/settled/index'
				});
			},
			goUse(index) {
				if(index==0){//店铺信息
					uni.navigateTo({
						url: '/pages/users/update_info/update_info'
					});
				}
				if(index==1){//我的收款吗
					uni.navigateTo({
						url: '/pages/users/qrcode/qrcode'
					});
				}
				if(index==2){//收益明细
					uni.navigateTo({
						url: '/pages/users/income_list/income_list'
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page_content{
		
	}
	
	.header{
		padding: 40rpx;
		background-image: linear-gradient(to top right, #F8D47B, #EFBA4E);
		
		.flex{
			line-height: 96rpx;
			color: #8F5807;
			font-weight: 500;
			
			.img {
				width: 96rpx;
				height: 96rpx;
			}
			
			.name {
				flex: 1;
				font-size: 32rpx;
				margin-left: 20rpx;
			}
			
			.mark {
				font-size: 28rpx;
			}
			
			.xiangyou {
				color: #8F5807;
				font-size: 28rpx !important;
			}
		}
		
		.count{
			display: flex;
			justify-content: center;
			text-align: center;
			font-weight: 600;
			margin-top: 30rpx;
			
			.item {
				flex: 1;
				color: #fff;
				
				.amount{
					font-size: 40rpx;
				}
				
				.title{
					font-size: 28rpx;
					margin-top: 20rpx;
					margin-bottom: 40rpx;
				}
			}
		}
	}
	
	.mode {
		background-color: #fff;
		height: 760rpx;
		margin: 0 40rpx;
		border-radius: 20rpx;
		position: relative;
		top: -40rpx;
		display: grid;
		grid-template-rows: repeat(3,80px);
		grid-template-columns: repeat(3,95px);
		
		.use {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
				
			.useImg{
				width: 88rpx;
				height: 88rpx;
			}
			
			.text{
				color: #343643;
				font-size: 28rpx;
			}
		}
	}
	
</style>
